<template>
    <div class="device-list">
        <div class="header">
            <router-link to="/" class="back-home">回到首页</router-link>
        </div>
        <h1 class="title">医疗设备列表</h1>
        <div class="device-grid">
            <div v-for="device in paginatedDevices" :key="device.id" class="device-item">
                <img :src="device.image" :alt="device.name" class="device-image" />
                <h2>{{ device.name }}</h2>
                <p>价格: {{ device.price }}</p>
                <button @click="showPaymentDialog(device)">购买</button>
            </div>
        </div>
        <el-pagination
            class="pagination"
            background
            layout="prev, pager, next"
            :total="devices.length"
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="handlePageChange"
        />
        <div class="zhixian">

        </div>
    </div>
    <ShcareBottom />
    <!-- 支付弹窗 -->
    <el-dialog v-model="paymentDialogVisible" title="选择支付方式" width="30%">
        <div class="payment-options">
            <el-button type="primary" @click="handleWechatPay">微信支付</el-button>
            <el-button type="success" @click="handleAlipay">支付宝支付</el-button>
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
// import device1 from '@/assets/images/device1.jpg';
import { ref,computed,onMounted } from 'vue';
import { ElDialog, ElButton } from 'element-plus';
import axios from 'axios';

interface DeviceInfo {
  id: number;
  name: string;
  price: number;
  image: string; // 图片 URL
}

const devices = ref<DeviceInfo[]>([]); // 设备列表
const currentPage = ref(1); // 当前页码
const pageSize = ref(8); // 每页显示数量
const paymentDialogVisible = ref(false);// 支付弹窗相关逻辑
const selectedDevice = ref<DeviceInfo | null>(null); // 当前选中的设备
// 计算当前页显示的数据
const paginatedDevices = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return devices.value.slice(start, end);
});

// 处理分页变化
const handlePageChange = (page: number) => {
    currentPage.value = page;
};

// 获取设备信息
const fetchDevices = async () => {
  try {
    const token = localStorage.getItem('token'); // 获取 Token
    const response = await axios.get('/api/deviceinfo/list', {
      headers: {
        'Authorization': `Bearer ${token}` // 传递 Token
      }
    });

    if (response.data && response.data.rows && response.data.rows.length > 0) {
      // 将后端返回的数据映射到 devices
      devices.value = response.data.rows.map((device: DeviceInfo) => ({
        id: device.id,
        name: device.name,
        price: device.price,
        image: device.image
      }));
    } else {
      console.error('未获取到设备信息');
    }
  } catch (error) {
    console.error('获取设备信息失败:', error);
  }
};

const showPaymentDialog = (device: any) => {
    selectedDevice.value = device;
    paymentDialogVisible.value = true;
};

const handleWechatPay = () => {
    console.log('微信支付:', selectedDevice.value?.price);
    // 这里可以调用微信支付接口
    paymentDialogVisible.value = false;
};

const handleAlipay = () => {
    console.log('支付宝支付:', selectedDevice.value?.price);
    // 这里可以调用支付宝支付接口
    paymentDialogVisible.value = false;
};

onMounted(() => {
  fetchDevices(); // 加载设备信息
});
</script>

<style scoped>
.device-list {
    margin: 40px 130px 0 135px;
}

.title {
    background-color: #f8f9fa;
    /* 灰色背景 */
    padding: 10px;
    font-size: 25px;
    /* 字体调小 */
    text-align: left;
    margin-bottom: 20px;
}

.device-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 每行4个设备 */
    gap: 20px;
    /* 设备之间的间距 */
}

.device-item {
    text-align: center;
    background-color: #fff;
    cursor: pointer;
    box-sizing: border-box;
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;

    h2 {
        font-size: 20px;
    }

    p {
        margin: 6px 0;
    }

    &:hover {
        transform: translateY(-5px);
    }
}

.device-image {
    width: 100%;
    /* 图片宽度占满容器 */
    height: auto;
    /* 高度自适应 */
    margin-bottom: 10px;
    /* 图片与文字之间的间距 */
}

.header {
    width: 100%;
    padding: 10px 20px;
    position: absolute;
    top: 0;
    left: 10px;
    right: 0;
    z-index: 10;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.payment-options {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.back-home {
    color: #007bff;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
}

.back-home:hover {
    text-decoration: underline;
}

.zhixian {
    width: 0;
    height: 0;
    border: 100px solid transparent;
    border-top: 100px solid pink;
    opacity:0.5;
}
</style>